<template>
    <div class="mt10">
        <van-form @submit="onSubmit"  @failed="onFail" ref="form" >
            <van-field
                v-model="form.phone"
                name="phone"
                label="手机号码"
                placeholder="请输入手机号码"
                clearable
                :rules="[
                    { required: true, message: '请填写手机号' },
                    {
                        pattern:reg.phone,
                        message:'请输入正确的手机号'
                    }
                ]"
            />
            <van-field
                v-model="form.captcha"
                center
                clearable
                name="captcha"
                label="短信验证码"
                placeholder="请输入短信验证码"
                :rules="[
                { required: true, message: '请填写验证码' },
                {
                    pattern:reg.code,message:'4位验证码'
                }
                ]"
                >
                <template #button>
                    <van-button v-if="flag" :disabled="!disabled" size="small" native-type="button" type="primary"  @click.stop="startSendSms">发送验证码</van-button>
                    <van-button v-else disabled size="small" native-type="button" >剩余{{count}}S</van-button>
                </template>
            </van-field>
            <div class="links" >
                <p class="left">
                    <router-link to="/register">没有账号,去注册?</router-link>
                </p>
                <p class="right">
                    <router-link to="/forgetpass">找回密码?</router-link>
                </p>
            </div>
            <div style="margin: 16px;">
                <van-button  block type="warning" native-type="submit">验证提交</van-button>
            </div>
        </van-form>
    </div>
</template>


<script>
var timer = null
export default {
    data(){
        return {
            form:{

            },
            flag:true,
            count:120
        }
    },
    computed:{
        disabled(){
            // 检测手机号 
            return this.reg.phone.test(this.form.phone)
        }
    },
    destroyed(){
        clearInterval(timer)
        timer = null;
    },
    methods:{
        timeDown(){
            this.count--;
            this.flag = false;
            timer = setInterval(()=>{
                if(this.count>0){
                    this.count--;
                    this.flag = false;
                }else{
                    clearInterval(timer)
                    timer = null;
                    this.flag = true;
                    this.count = 120;
                }
            },1000)
        },
        sendSms(){
            // 真正的发送验证码
            // 先判断这个用户是否被注册
            this.$ajax.findUser({
                phone:this.form.phone
            })
            .then(res=>{
                if(res.length>0){
                    // 发送
                    this.$ajax.getCaptcha({
                         phone:this.form.phone
                    })
                    .then(res=>{
                        if(res.code==200){
                            // 成功
                            this.$toast("验证码发送成功")
                        }else{
                            this.$toast("验证码发送失败")
                        }
                    })
                }else{
                    this.$toast("当前手机号未被注册")
                }
            })
        },
        startSendSms(){
            console.log("发送验证码")
            this.timeDown()
            this.sendSms()
        },
        onSubmit(){
            console.log('123')
            this.$ajax.findUser({
                phone:this.form.phone
            })
            .then(result=>{
                if(result.length>0){
                    // 验证验证码
                    this.$ajax.checkCaptcha(this.form)
                    .then(res=>{
                        if(res.code==200){
                            // 登录成功 
                            this.changeUserInfo(result[0]);
                            localStorage.setItem("phone",this.form.phone)
                            this.$router.push({
                                name:'mine'
                            })
                        }else{
                            this.$toast(res.message || "验证码错误")
                        }
                    })
                }else{
                    this.$toast("当前手机号未被注册,不能校验")
                }
            })
        },
        onFail(){
            this.showErrMsg("校验失败")
        }
    },
    mounted(){
        if(this.$route.query.phone){
            this.form = {...this.form,phone:this.$route.query.phone}
        }else{
            this.form = {...this.form,phone:localStorage.getItem('phone')}
        }
    }
}
</script>
